<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="日志" @ok="handleOk" width="1000px">
            <div v-loading="loading" ref="terminal" element-loading-text="拼命连接中"></div>
        </a-modal>
    </div>
</template>
<script setup>
import { defineProps, defineEmits, computed, ref, onMounted, watch } from 'vue';
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import "xterm/css/xterm.css";
import { getInstanceLogsApi } from 'api/modules/api.instance'

const fitAddon = new FitAddon();

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 获取日志token
const logList = ref()
const getInstanceLogs = async () => {
    const params = {
        instanceId: props.instance?.Instance?.instanceId,
        from: props.instance?.Instance?.lastStartTime
        // range: 3600
    }

    const res = await getInstanceLogsApi(params)
    if (res.code != 0) {
        return
    }

    logList.value = res.data.logs
}

const terminal = ref(null);

let loading = ref(true);
let term = ref(null);

const onWSReceive = (data = []) => {
    // 转换字符串输出
    let str = ''
    data.forEach(item => {
        str += item.content + '\n'
    })
    term.value.element && term.value.focus()
    term.value.write(str)
}


const initTerm = () => {
    term.value = new Terminal({
        rendererType: "canvas", //渲染类型
        convertEol: true, //启用时，光标将设置为下一行的开头
        scrollback: 100, //终端中的回滚量
        disableStdin: true, //是否应禁用输入。
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁

        theme: {
            foreground: "#14e264", //字体
            background: "#002833", //背景色
            cursor: "help", //设置光标
            lineHeight: 16
        },
        bellStyle: 'sound',
        rightClickSelectsWord: true,
        screenReaderMode: true,
        allowProposedApi: true,
        LogLevel: 'debug',
        tabStopWidth: 4,

        // lineHeight: 1.2,
        // fontSize: 12,
        // fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
        // theme: {
        //     background: '#181d28',
        // },
        // // 光标闪烁
        // cursorBlink: true,
        // cursorStyle: 'underline',
        // scrollback: 100,
        // tabStopWidth: 4,
    });
    term.value.open(terminal.value);
    term.value.loadAddon(fitAddon);
    setTimeout(() => {
        fitAddon.fit();
    }, 5)
}

//监听类型变化，重置term
// watch(() => props.type, () => {
//     first.value = true;
//     loading.value = true;

//     // 重置
//     term.value.reset();
// })

onMounted(async () => {
    await getInstanceLogs()
    initTerm();
    onWSReceive(logList.value)
})

// 确定按钮的回调
const handleOk = () => {
    emit('update:modelValue', false)
};

</script>
<style lang="scss" scoped>
#terminal {
    width: 100%;
    height: 100%;
}
</style>